<template>
    <BackgroundImage>
        <TopNavigation title="房间列表" backText="赛程列表" :titleSub='"赛程:" + scheduleName' />
        <view class="view-container">
            <view class="view-container-left">
                <view class="view-container-left-top" @click="goToCreateRoom">
                    创建房间
                </view>
                <view class="view-container-left-model" @click="createRoomByModel">
                    按模型创建
                </view>
                <view class="view-container-left-bottom" @click="findCreateJoinRoom">
                    查找加入房间
                </view>
            </view>
            <view class="view-container-right">
                <BoxView :titBoxObj="{
                    title: '房间列表',
                    titleCount: `共有${roomList.length}个赛程`
                }" padding="0" style="background: #FFFFF4;">
                    <view class="view-container-right-list">
                        <view class="view-container-right-list-item-empty" v-if="roomList.length === 0">
                            <text>暂无房间</text>
                        </view>
                        <view class="view-container-right-list-item-empty" v-if="loading">
                            <text>加载中...</text>
                        </view>
                        <view v-if="!loading && roomList.length > 0" class="view-container-right-list-item"
                            v-for="room in roomList" :key="room.id">
                            <view class="view-container-right-list-item-title">
                                <view class="next-row">
                                    <view class="id-text" style="font-size: 16rpx;">{{ room.name }}</view>
                                    <view class="room-status" :class="getStatusClass(room.status)">
                                        {{ getStatusText(room.status) }}
                                    </view>
                                </view>
                                <view class="next-row">
                                    <view class="id-text"><text>房间ID：</text>{{ room.id }}</view>
                                </view>
                                <view class="next-row">
                                    <view class="id-value"><text>房主：</text>{{ room.owner || '未设置' }}</view>
                                </view>
                                <view class="next-row">
                                    <view class="id-text"><text>比赛时间：</text>{{ formatDate(room.matchTime) }}</view>
                                </view>
                                <view class="next-row">
                                    <view class="id-text"><text>获胜模式：</text>{{ getWinModelText(room.winModel) }}</view>
                                </view>
                                <view class="next-row">
                                    <view class="id-text"><text>开始类型：</text>{{ getStartTypeText(room.startType) }}</view>
                                </view>
                                <view class="next-row">
                                    <view class="id-text"><text>座位数：</text>{{ getSeatCount(room.seats) }}</view>
                                </view>
                                <view class="next-row">
                                    <view class="id-text"><text>创建时间：</text>{{ formatDate(room.createTime) }}</view>
                                </view>
                                <view class="next-button">
                                    <!-- <view class="next-button-item1" @click.stop="openRuleModal(room)">规则管理</view> -->
                                    <view class="next-button-item2" @click.stop="goToGroupManage(room)">管理分组</view>
                                    <view class="next-button-item3" @click.stop="goToRuleManage(room)">规则页面</view>
                                    <view class="next-button-text2" @click="editRoom(room)">编辑</view>
                                    <view class="next-button-text1" @click="deleteRoom(room)">删除</view>
                                    <view class="next-button-text3" @click="goToRoomSeats(room)">席位</view>
                                </view>
                            </view>
                        </view>
                    </view>

                </BoxView>
            </view>
        </view>
    </BackgroundImage>

  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { onLoad, onReachBottom } from '@dcloudio/uni-app'
  import { MatchRoomAPI, MatchRoomRuleAPI, BattleAPI, MatchRoomGroupAPI, MatchScheduleAPI } from '@/api/battle.js'
import BoxView from "@/components/UiView/BoxView.vue";
import TopNavigation from "@/components/UiView/TopNavigation.vue";
  
  const loading = ref(false)
  const roomList = ref([])
  const scheduleId = ref('')
  const scheduleName = ref('')
  
  // 分页相关数据
  const currentPage = ref(0)
  const pageSize = ref(20)
  const hasMore = ref(true)
  const loadingMore = ref(false)
  const totalCount = ref(0)
  
  // 规则管理相关数据
  const showRuleModal = ref(false)
  const showRuleFormModal = ref(false)
  const ruleLoading = ref(false)
  const submitting = ref(false)
  const currentRoom = ref(null)
  const ruleList = ref([])
  const isEditingRule = ref(false)
  const currentRule = ref(null)
  
  // 选择器相关数据
  const showScoreModelPicker = ref(false)
  const showBattleModelPicker = ref(false)
  
  // 规则表单数据
  const ruleForm = ref({
    startPoint: '',
    endPoint: '',
    prepareTimeSeconds: '',
    limitTimeSeconds: '',
    round: '',
    scoreModel: 0,
    battleModel: 0
  })
  
  const scoreModelIndex = ref(0)
  const battleModelIndex = ref(0)
  
  // 状态映射
  const statusMap = {
    1: '等待',
    2: '准备',
    3: '倒计时',
    4: '开始比赛',
    5: '结束比赛',
    6: '暂停',
    7: '取消/终止',
    8: '异常'
  }
  
  // 状态样式映射
  const statusClassMap = {
    1: 'status-wait',
    2: 'status-prepare',
    3: 'status-countdown',
    4: 'status-start',
    5: 'status-stop',
    6: 'status-pause',
    7: 'status-cancel',
    8: 'status-error'
  }
  
  // 获胜模式映射
  const winModelMap = {
    1: '一回合 抢1分',
    2: '三回合 抢2分',
    3: '五回合 抢3分',
    4: '高分',
    5: 'BO3',
    6: 'AO5',
    7: 'BAO5',
    8: '时间短',
    9: '步数短',
    10: '距离长',
    11: '五局（抢3） 五回合（抢3）'
  }
  
  // 开始类型映射
  const startTypeMap = {
    0: '定时开赛',
    1: '手动开赛',
    2: '人满即开'
  }
  
  // 得分模式映射
  const scoreModelMap = {
    0: '不记分',
    1: '时间短',
    2: '时间长',
    3: '距离短',
    4: '距离长',
    5: '得分少',
    6: '得分多',
    7: '步数短',
    8: '步数长'
  }
  
  // 对战模式映射
  const battleModelMap = {
    0: '接力',
    1: '单回合',
    2: '多回合'
  }
  
  const scoreModelOptions = [
    '不记分',
    '时间短',
    '时间长',
    '距离短',
    '距离长',
    '得分少',
    '得分多',
    '步数短',
    '步数长'
  ]
  
  const battleModelOptions = [
    '接力',
    '单回合',
    '多回合'
  ]
  
  const getStatusText = (status) => statusMap[status] || '未知'
  const getStatusClass = (status) => statusClassMap[status] || 'status-unknown'
  const getWinModelText = (winModel) => winModelMap[winModel] || '未知'
  const getStartTypeText = (startType) => startTypeMap[startType] || '未知'
  const getScoreModelText = (scoreModel) => scoreModelMap[scoreModel] || '未知'
  const getBattleModelText = (battleModel) => battleModelMap[battleModel] || '未知'
  
  const formatDate = (timestamp) => {
    if (!timestamp) return '未设置'
    const date = new Date(timestamp)
    return date.toLocaleString('zh-CN')
  }
  
  const formatTime = (milliseconds) => {
    if (!milliseconds) return '未设置'
    const seconds = Math.floor(milliseconds / 1000)
    return `${seconds}秒`
  }
  
  const getSeatCount = (seats) => {
    if (!seats) return 0
    return Array.isArray(seats) ? seats.length : 0
  }
  
  const fetchRooms = async (isLoadMore = false) => {
    if (!scheduleId.value) return;
    
    console.log('fetchRooms被调用', {
      isLoadMore,
      scheduleId: scheduleId.value,
      currentPage: currentPage.value,
      pageSize: pageSize.value
    })
    
    if (isLoadMore) {
      if (!hasMore.value || loadingMore.value) {
        console.log('跳过加载更多：hasMore或loadingMore为false')
        return;
      }
      loadingMore.value = true
    } else {
      loading.value = true
      // 重置分页状态
      currentPage.value = 0
      hasMore.value = true
      roomList.value = []
    }
    
    try {
      const result = await MatchRoomAPI.page({ 
        matchScheduleId: scheduleId.value,
        pageNum: currentPage.value,
        pageSize: pageSize.value
      })
      console.log('房间查询API返回结果:', result)
      if (result.code === 0) {
        const newRooms = result.data?.list || result.data || []
        totalCount.value = result.data?.totalCount || 0
        
        console.log('API返回数据', {
          newRoomsLength: newRooms.length,
          totalCount: totalCount.value,
          isLoadMore
        })
        
        if (isLoadMore) {
          // 加载更多时，追加数据
          roomList.value = [...roomList.value, ...newRooms]
        } else {
          // 首次加载时，替换数据
          roomList.value = newRooms
        }
        
        // 判断是否还有更多数据
        hasMore.value = newRooms.length === pageSize.value
        if (hasMore.value) {
          currentPage.value++
        }
        
        console.log('数据加载完成', {
          hasMore: hasMore.value,
          currentPage: currentPage.value,
          totalRooms: roomList.value.length
        })
      } else {
        if (!isLoadMore) {
          roomList.value = []
        }
        throw new Error(result.msg || '获取房间失败')
      }
    } catch (error) {
      console.error('获取房间失败:', error)
      if (!isLoadMore) {
        roomList.value = []
      }
      uni.showToast({
        title: error.message || '获取房间失败',
        icon: 'none'
      })
    } finally {
      if (isLoadMore) {
        loadingMore.value = false
      } else {
        loading.value = false
      }
    }
  }
  
  // 加载更多房间
  const loadMoreRooms = () => {
    console.log('loadMoreRooms被调用', {
      hasMore: hasMore.value,
      loadingMore: loadingMore.value,
      currentPage: currentPage.value,
      roomListLength: roomList.value.length
    })
    
    // 防止重复加载
    if (!hasMore.value || loadingMore.value) {
      console.log('跳过加载更多：', {
        hasMore: hasMore.value,
        loadingMore: loadingMore.value
      })
      return
    }
    
    console.log('开始加载更多数据，当前页码：', currentPage.value)
    fetchRooms(true)
  }
  
  // 重置并重新加载
  const refreshRooms = () => {
    fetchRooms(false)
  }
  
  onLoad((options) => {
    if (options.scheduleId) {
      scheduleId.value = options.scheduleId
      scheduleName.value = decodeURIComponent(options.scheduleName || '')
      fetchRooms()
    }
  })
  
  // 页面滚动到底部时触发
  onReachBottom(() => {
    console.log('页面滚动到底部，开始加载更多数据')
    loadMoreRooms()
  })
  
  // 跳转到创建房间页面
  const goToCreateRoom = () => {
    uni.navigateTo({
      url: `/views/room-query/room-create?scheduleId=${scheduleId.value}&scheduleName=${encodeURIComponent(scheduleName.value)}`
    })
  }
  
  // 查找创建加入房间
  const findCreateJoinRoom = async () => {
    try {
      // 显示加载提示
      uni.showLoading({
        title: '查找房间中...'
      })
      
      // 调用findCreateJoinRoom API
      const result = await BattleAPI.findCreateJoinRoom({
        matchScheduleId: scheduleId.value
      })
      
      console.log('findCreateJoinRoom API返回结果:', result)
      
      if (result.code === 0) {
        // 处理成功结果
        if (result.data) {
          // 如果找到了可加入的房间，显示结果
          uni.showModal({
            title: '查找结果',
            content: `找到可加入的房间: ${result.data.roomName || '未知房间'}`,
            showCancel: false,
            success: () => {
              // 可以在这里添加跳转到房间的逻辑
              console.log('找到的房间信息:', result.data)
            }
          })
        } else {
          // 没有找到可加入的房间
          uni.showModal({
            title: '查找结果',
            content: '当前没有可加入的房间，是否创建新房间？',
            success: (res) => {
              if (res.confirm) {
                goToCreateRoom()
              }
            }
          })
        }
      } else {
        throw new Error(result.msg || '查找房间失败')
      }
    } catch (error) {
      console.error('findCreateJoinRoom失败:', error)
      uni.showToast({
        title: error.message || '查找房间失败',
        icon: 'none'
      })
    } finally {
      uni.hideLoading()
    }
  }
  
  // 按模型创建房间
  const createRoomByModel = async () => {
    try {
      // 显示加载提示
      uni.showLoading({
        title: '按模型创建房间中...'
      })
      
      // 使用 MatchScheduleAPI.page 查询赛程详情
      const scheduleResult = await MatchScheduleAPI.page({
        matchScheduleId: scheduleId.value,
        pageNum: 0,
        pageSize: 1
      })
      
      if (scheduleResult.code !== 0) {
        throw new Error('获取赛程详情失败')
      }
      
      // 从赛程详情中获取赛程模型ID
      const scheduleInfo = scheduleResult.data?.list?.[0] || scheduleResult.data?.[0]
      const matchScheduleModelId = scheduleInfo?.matchScheduleModelId
      
      if (!matchScheduleModelId) {
        throw new Error('当前赛程未配置赛程模型，无法按模型创建房间')
      }
      
      // 调用createRoomByModel API
      const result = await BattleAPI.createRoomByModel({
        matchScheduleModelId: matchScheduleModelId,  // 使用赛程模型ID
        matchScheduleId: scheduleId.value,           // 赛程ID
        matchRoomId: `room_${Date.now()}`            // 生成唯一的房间ID
      })
      
      console.log('createRoomByModel API返回结果:', result)
      
      if (result.code === 0) {
        uni.showToast({
          title: '按模型创建房间成功',
          icon: 'success'
        })
        
        // 刷新房间列表
        refreshRooms()
      } else {
        throw new Error(result.msg || '按模型创建房间失败')
      }
    } catch (error) {
      console.error('createRoomByModel失败:', error)
      uni.showToast({
        title: error.message || '按模型创建房间失败',
        icon: 'none'
      })
    } finally {
      uni.hideLoading()
    }
  }
  
  // 编辑房间
  const editRoom = (room) => {
    uni.navigateTo({
      url: `/views/room-query/room-edit?roomId=${room.id}&scheduleId=${scheduleId.value}&scheduleName=${encodeURIComponent(scheduleName.value)}`
    })
  }
  
  // 删除房间
  const deleteRoom = (room) => {
    uni.showModal({
      title: '确认删除',
      content: `确定要删除房间 "${room.name}" 吗？`,
      success: async (res) => {
        if (res.confirm) {
          try {
            const result = await MatchRoomAPI.remove({
              matchRoomId: room.id
            })
            
            if (result.code === 0) {
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              })
              refreshRooms()
            } else {
              throw new Error(result.msg || '删除失败')
            }
          } catch (error) {
            console.error('删除房间失败:', error)
            uni.showToast({
              title: error.message || '删除失败',
              icon: 'none'
            })
          }
        }
      }
    })
  }
  
  // 打开规则管理模态框
  const openRuleModal = (room) => {
    currentRoom.value = room
    showRuleModal.value = true
    loadRuleList()
  }
  
  // 关闭规则管理模态框
  const closeRuleModal = () => {
    showRuleModal.value = false
    currentRoom.value = null
    ruleList.value = []
  }
  
  // 加载规则列表
  const loadRuleList = async () => {
    if (!currentRoom.value) return
    
    ruleLoading.value = true
    try {
      const result = await MatchRoomRuleAPI.page({
        matchRoomId: currentRoom.value.id,
        pageNum: 0,
        pageSize: 100
      })
      
      if (result.code === 0 && result.data) {
        ruleList.value = result.data.list || result.data || []
      } else {
        ruleList.value = []
        throw new Error(result.msg || '获取规则列表失败')
      }
    } catch (error) {
      console.error('获取规则列表失败:', error)
      uni.showToast({
        title: error.message || '获取规则列表失败',
        icon: 'none'
      })
    } finally {
      ruleLoading.value = false
    }
  }
  
  // 打开添加规则模态框
  const openAddRuleModal = () => {
    isEditingRule.value = false
    currentRule.value = null
    resetRuleForm()
    showRuleFormModal.value = true
  }
  
  // 打开编辑规则模态框
  const editRule = (rule) => {
    isEditingRule.value = true
    currentRule.value = rule
    fillRuleForm(rule)
    showRuleFormModal.value = true
  }
  
  // 关闭规则表单模态框
  const closeRuleFormModal = () => {
    showRuleFormModal.value = false
    isEditingRule.value = false
    currentRule.value = null
    resetRuleForm()
  }
  
  // 重置规则表单
  const resetRuleForm = () => {
    ruleForm.value = {
      startPoint: '',
      endPoint: '',
      prepareTimeSeconds: '',
      limitTimeSeconds: '',
      round: '',
      scoreModel: 0,
      battleModel: 0
    }
    scoreModelIndex.value = 0
    battleModelIndex.value = 0
  }
  
  // 填充规则表单
  const fillRuleForm = (rule) => {
    ruleForm.value = {
      startPoint: rule.startPoint || '',
      endPoint: rule.endPoint || '',
      prepareTimeSeconds: rule.prepareTime ? Math.floor(rule.prepareTime / 1000) : '',
      limitTimeSeconds: rule.limitTime ? Math.floor(rule.limitTime / 1000) : '',
      round: rule.round || '',
      scoreModel: rule.scoreModel || 0,
      battleModel: rule.battleModel || 0
    }
    scoreModelIndex.value = rule.scoreModel || 0
    battleModelIndex.value = rule.battleModel || 0
  }
  
  // 打开得分模式选择器
  const openScoreModelPicker = () => {
    showScoreModelPicker.value = true
  }
  
  // 打开对战模式选择器
  const openBattleModelPicker = () => {
    showBattleModelPicker.value = true
  }
  
  // 保存规则
  const saveRule = async () => {
    if (!ruleForm.value.startPoint.trim()) {
      uni.showToast({
        title: '请输入起始点',
        icon: 'none'
      })
      return
    }
    
    if (!ruleForm.value.endPoint.trim()) {
      uni.showToast({
        title: '请输入结束点',
        icon: 'none'
      })
      return
    }
    
    submitting.value = true
    try {
      const data = {
        matchRoomId: currentRoom.value.id,
        startPoint: ruleForm.value.startPoint,
        endPoint: ruleForm.value.endPoint,
        prepareTime: ruleForm.value.prepareTimeSeconds ? parseInt(ruleForm.value.prepareTimeSeconds) * 1000 : 0,
        limitTime: ruleForm.value.limitTimeSeconds ? parseInt(ruleForm.value.limitTimeSeconds) * 1000 : 0,
        round: ruleForm.value.round ? parseInt(ruleForm.value.round) : 1,
        scoreModel: ruleForm.value.scoreModel,
        battleModel: ruleForm.value.battleModel
      }
      
      let result
      if (isEditingRule.value) {
        result = await MatchRoomRuleAPI.edit({
          ...data,
          matchRoomRuleId: currentRule.value.id
        })
      } else {
        result = await MatchRoomRuleAPI.create(data)
      }
      
      if (result.code === 0) {
        uni.showToast({
          title: isEditingRule.value ? '更新成功' : '创建成功',
          icon: 'success'
        })
        closeRuleFormModal()
        loadRuleList()
      } else {
        throw new Error(result.msg || (isEditingRule.value ? '更新失败' : '创建失败'))
      }
    } catch (error) {
      console.error('保存规则失败:', error)
      uni.showToast({
        title: error.message || '保存失败',
        icon: 'none'
      })
    } finally {
      submitting.value = false
    }
  }
  
  // 删除规则
  const deleteRule = (rule) => {
    uni.showModal({
      title: '确认删除',
      content: `确定要删除规则 "${rule.startPoint} -> ${rule.endPoint}" 吗？`,
      success: async (res) => {
        if (res.confirm) {
          try {
            const result = await MatchRoomRuleAPI.remove({
              matchRoomRuleId: rule.id
            })
            
            if (result.code === 0) {
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              })
              loadRuleList()
            } else {
              throw new Error(result.msg || '删除失败')
            }
          } catch (error) {
            console.error('删除规则失败:', error)
            uni.showToast({
              title: error.message || '删除失败',
              icon: 'none'
            })
          }
        }
      }
    })
  }
  
  // 跳转到规则管理页面
  const goToRuleManage = (room) => {
    uni.navigateTo({
      url: `/views/room-query/room-rule-manage?roomId=${room.id}&roomName=${encodeURIComponent(room.name)}`
    })
  }
  
  // 关闭得分模式选择模态框
  const closeScoreModelPicker = () => {
    showScoreModelPicker.value = false
  }
  
  // 关闭对战模式选择模态框
  const closeBattleModelPicker = () => {
    showBattleModelPicker.value = false
  }
  
  // 选择得分模式
  const selectScoreModel = (index) => {
    scoreModelIndex.value = index
    ruleForm.value.scoreModel = index
    closeScoreModelPicker()
  }
  
  // 选择对战模式
  const selectBattleModel = (index) => {
    battleModelIndex.value = index
    ruleForm.value.battleModel = index
    closeBattleModelPicker()
  }
  
  // 跳转到房间席位页面
  const goToRoomSeats = (room) => {
    uni.navigateTo({
      url: `/views/cube-battle-room?roomId=${room.id}&roomName=${encodeURIComponent(room.name)}`
    })
  }
  
  // 跳转到分组管理页面
  const goToGroupManage = (room) => {
    uni.navigateTo({
      url: `/views/room-query/group-manage?roomId=${room.id}&roomName=${encodeURIComponent(room.name)}`
    })
  }
  </script>
  
  <style lang="scss" scoped>
    .view-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: calc(100vh - 65rpx);
    padding-right: 20rpx;
    overflow: hidden;

    .room-status {
        display: flex;width:auto;
        padding: 4rpx 20rpx;
        border-radius: 20rpx;
        font-size: 12rpx;
        font-weight: bold;
          
          &.status-wait { background: #fff3cd; color: #856404; }
          &.status-prepare { background: #d1ecf1; color: #0c5460; }
          &.status-countdown { background: #d4edda; color: #155724; }
          &.status-start { background: #cce5ff; color: #004085; }
          &.status-stop { background: #f8d7da; color: #721c24; }
          &.status-pause { background: #fff3cd; color: #856404; }
          &.status-cancel { background: #f8d7da; color: #721c24; }
          &.status-error { background: #f8d7da; color: #721c24; }
        }

    &-right {
        flex: 1;
        height: 100%;
        overflow: hidden;

        &-list {
            padding: 10rpx;
            overflow: auto;
            height: calc(100% - 60rpx);

            &-item {
                background: #F0F0E4;
                border-radius: 10rpx;
                padding: 10rpx;
                margin-bottom: 10rpx;
                font-size: 14rpx;

                &-empty {
                    text-align: center;
                    margin-top: 80rpx;
                }

                .next-button {
                    display: flex;
                    justify-content: end;
                    align-items: center;
                    margin-top: 10rpx;

                    &-item1,
                    &-item2,
                    &-item3,
                    &-item4 {
                        width: 108rpx;
                        height: 30rpx;
                        font-size: 14rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding-bottom: 4rpx;
                        color: #fff;
                    }
                    &-text1,&-text2,&-text3{
                        font-size: 14rpx;
                        padding-bottom: 4rpx;
                        padding-left: 10rpx;
                        padding-right: 10rpx;
                        margin-left: 10rpx;
                    }
                    &-text2{
                        border-bottom: 2rpx solid #3D85EC;
                        color: #3D85EC;
                    }
                    &-text1{
                        border-bottom: 2rpx solid red;
                        color: red;
                    }
                    &-text3{
                        border-bottom: 2rpx solid #808387;
                        color: #808387;
                    }


                    &-item1{
                        background: url('/static/buttons/button2-1.png') no-repeat center center;
                        background-size: 100% 100%;
                        margin-right: 10rpx;
                    }

                    &-item2 {
                        background: url('/static/buttons/button7.png') no-repeat center center;
                        background-size: 100% 100%;
                    }

                    &-item3 {
                        background: url('/static/buttons/button5.png') no-repeat center center;
                        background-size: 100% 100%;
                    }

                    &-item4 {
                        background: url('/static/buttons/button6.png') no-repeat center center;
                        background-size: 100% 100%;
                    }
                }

                .next-row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 10rpx;

                    view {
                        // width: 50%;
                    }

                    text {
                        display: inline-block;
                        font-size: 14rpx;
                        color: #99A1A4;
                        width: 70rpx;
                        text-align: right;
                    }
                }
            }
        }
    }

    &-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10rpx 20rpx;

        view {
            width: 110rpx;
            box-sizing: border-box;
            padding-bottom: 10rpx;
            height: 85rpx;
            font-size: 15rpx;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: end;
            margin-bottom: 10rpx;
        }

        &-top {
            background: url('/static/view3.png') no-repeat center center;
            background-size: 100% 100%;
        }

        &-bottom {
            background: url('/static/view5.png') no-repeat center center;
            background-size: 100% 100%;
        }

        &-model {
            background: url('/static/view4.png') no-repeat center center;
            background-size: 100% 100%;
        }
    }
}
  </style> 